<template>
   
    <div class="account-list">
        <!-- 添加管理员按钮 -->
        <!-- 在登录不同账号功能显示不同的情况下 用v-if确实能实现
             但是需要每个都要重新写 所以可以使用自定义指令来完成 
            将自定义指令注册到全局-->
        <!-- <el-button type="primary" @click="showAccount" class="anNiu" v-if="loginRole == 0">添加管理员 +
        </el-button> -->
        <el-button type="primary" @click="showAccount" class="anNiu" v-jurisdiction>添加管理员 +
        </el-button>
        <!-- 表格区域 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" prop="date" label="序号" />
            <el-table-column prop="adminname" label="账号" />
            <el-table-column prop="password" label="密码" />
            <!-- formatter	用来格式化内容	可以利用这个将查询到的角色对象转换为汉字  
        function(row, column, cellValue, index) -->
            <el-table-column prop="role" label="权限" :formatter="format" />
            <el-table-column prop="" label="操作" v-jurisdiction>

                <template #default="scope">
                    <el-button type="primary" @click="editAdmin(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="delAdmin(scope.row ,scope.$index)">删除</el-button>
                </template>
            </el-table-column>>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-model:current-page="currentpage" v-model:page-size="pagesize" :page-sizes="pageAll"
            :background="background" layout="total, sizes, prev, pager, next, " :total="total" />
        <!-- 点击新增管理员的时候 弹窗右侧的抽屉面板 -->
        <!-- 标题写成动态的 -->
        <el-drawer v-model="show" :title="title">
            <el-form :model="adminData">
                <el-form-item label="账号">
                    <el-input v-model="adminData.adminname" placeholder="账号" :disabled="title=='编辑管理员'"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="adminData.password" placeholder="密码" :disabled="title=='编辑管理员'"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <!-- 权限这里可以放一个下拉框 -->
                    <el-select v-model="adminData.role" placeholder="角色">
                        <el-option label="超级管理员" value='2'></el-option>
                        <el-option label="管理员" value='1'></el-option>
                        <el-option label="员工" value='0'></el-option>
                        
                    </el-select>
                </el-form-item>

                <el-form-item label="权限">
                    <el-tree ref="treeRef" :data="treeData" show-checkbox default-expand-all node-key="id" highlight-current
                         />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitData">{{ title }}</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
import { getAccountListAPI ,addAdminAPI,updateAdminAPI,deleteAdminAPI} from '@/api/account.js'
import { nextTick } from 'vue'
export default {
    data() {
        return {
            accountData: [],
            currentpage: 1,
            pagesize: 5,
            pageAll: [10, 20, 30, 40, 50],
            background: true,
            total: 0,
            // 抽屉的显示控制
            show: false,
            // 标题
            title: '',
            // 添加或者编辑管理员的对象数据
            adminData: {
                adminname: '',
                password: '',
                role: '',
                checkedKeys: []
            },
            // 菜单树
            treeData: [
                { id: '1', label: '首页' },
                {
                    id: '2',
                    label: '轮播图管理',
                    children: [
                        { id: '2-1', label: '轮播图列表' },
                        { id: '2-2', label: '添加轮播图' },
                    ],
                },
                {
                    id: '3',
                    label: '产品管理',
                    children: [
                        { id: '3-1', label: '产品列表' },
                        { id: '3-2', label: '秒杀列表' },
                        { id: '3-3', label: '推荐列表' },
                        { id: '3-4', label: '筛选列表' },
                    ],
                },
                {
                    id: '4',
                    label: '账号管理',
                    children: [
                        { id: '4-1', label: '账号列表' },
                    ],
                },
            ],
            loginRole: ''
        }
    },
    // 使用计算属性 对后端返回的数据进行分页操作
    computed: {
        tableData() {
            // 后端不提供分页数据 前端怎么分页？
            // 答：截取数组的方式
            return this.accountData.slice(
                (this.currentpage - 1) * this.pagesize,
                this.currentpage * this.pagesize
            )
        }
    },
    methods: {
        loadAccountList() {
            getAccountListAPI().then(res => {
                // console.log(res);
                if (res.data.code == 200) {
                    this.accountData = res.data.data,
                        // 这个数组中有多少数据 长度就是多少
                        this.total = this.accountData.length
                }
            })
        },
        // 将查询到的角色数据转换成汉字
        format(row) {
            // console.log(row.role);
            if (row.role == 0) {
                return '员工'
            } else if (row.role == 1) {
                return '管理员'
            } else if (row.role == 2) {
                return '超级管理员'
            } 
        },
        // 点击添加的时候 显示抽屉 
        showAccount() {
           
            this.show = true
            // 点击新增管理员的时候标题应该变成添加管理员 
            this.title = '新增管理员'
            // this.loadAccountList()
        },
        // 点击编辑按钮 打开抽屉
        editAdmin(row) {
            this.show = true
            this.title = '编辑管理员'
            console.log(row);
            // 这个地方是回显数据 点击事件触发的时候 把数据传过来
            this.adminData.adminname = row.adminname
            this.adminData.password = row.password
            // 这里返回的角色是数据 因为上面绑的是字符串  所以给他后面加个字符串就解决了
            this.adminData.role = row.role + ''
            // 这个时候 这个树结构是回显不了的 因为树结构没有v-model 
            // 这行代码执行的太快了  树还没有挂载完成 这行代码就已经执行结束了 所以拿不到dom
            // this.adminData.checkedKeys = row.checkedKeys
            // 针对这个问题 vue中给出了nextTick方法 保证dom渲染结束之后，才执行
            // nexttick选项式可以用，组合式用不了 
            this.$nextTick(()=>{
                this.$refs.treeRef.setCheckedKeys(row.checkedKeys, false)
            })
            // 或者使用定时器也可以解决这个问题
            // setTimeout(()=>{
            //     this.$refs.treeRef.setCheckedKeys(row.checkedKeys, false)
            // },0)
        },
        // 点击新增或编辑按钮 提交表单的数据
        submitData(){
            // console.log(this.adminData);
            // 点击submit的时候获取选中树形树结构的数据
            this.adminData.checkedKeys=this.$refs.treeRef.getCheckedKeys(false)
            // 表单验证
            if(this.title=='新增管理员'){
                addAdminAPI({
                    // adminname:this.adminData.adminname,
                    // password:this.adminData.password,
                    // role:this.adminData.role,
                    // checkedKeys:this.adminData.checkedKeys
                    ...this.adminData
                }).then(res=>{
                    if(res.data.code == 200){
                        this.show = false
                        // this.loadAccountList()
                    }
                })
            }
            if(this.title =='编辑管理员'){
                updateAdminAPI({...this.adminData}).then(res=>{
                    if(res.data.code == 200){
                        this.show = false
                        this.loadAccountList()
                    }
                })
            }

        },
        // 点击删除管理员
        delAdmin(row,index){
            console.log(row);
            deleteAdminAPI({
                adminid:row.adminid
            }).then(res=>{
                if(res.data.code == 200){
                    // this.loadAccountList()
                    // 后台给出信息后 可以操作数组，将当前对应的这个数据删除即可
                    this.accountData.splice(index,1)
                }
            })
        }

        
    },
    created() {
        this.loadAccountList()
        this.loginRole = JSON.parse(localStorage.getItem('login')).role
        console.log(this.loginRole);
    }

}
</script>

<style lang="less" scoped>
.account-list {
    width: 100%;
    height: 100%;
}

.anNiu {
    margin-top: 5px;
}

.el-select {
    width: 100%;
}
</style>